<template>
  <h1>Counter</h1>
  <button @click="decrease">-</button>
  {{ counter }}
  <button @click="increase">+</button>
</template>

<script setup>
import { useCounterStore } from "@/stores/counter";
import { storeToRefs } from "pinia";

const store = useCounterStore();
const { counter } = storeToRefs(store);
const { decrease, increase } = store;
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
